<template>
  <div id="app">
    
    <transition name="fade">

      <router-view></router-view>
 
    </transition> 
  
  </div>
</template>

<script>
import {ViewBox} from 'vux'
export default {
  name: 'app',
  components:{
    ViewBox
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/close.less';
</style>
<style lang="less">
@import '~vux/src/styles/reset.less';

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #fbf9fe;
  #app{
    height:100%;
  }
}
@media only screen{
  html,body{
    // max-width:480px;
    // max-height: 800px;
  }
}
.header {
    position: fixed!important;
    width: 100%;
    z-index: 999;
}
.content{
  padding-top: 46px;
}

.circle-index{
  width:60px;
  height: 60px;
  border: 1px solid #3FC7FA;
  border-radius: 50%;
}
</style>
<style lang="less">

.fade-enter-active{
  transition: opacity .8s ease;
}

.fade-enter{
  opacity: 0
}

.my-item {
    opacity: 0;
    animation-name: animationStyle1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.shown-loop(@n, @i: 1) when (@i <=@n) {
    .my-item:nth-child(@{i}) {
        animation-duration: @i*200ms;
    }
    .shown-loop(@n, (@i + 1));
}

.shown-loop(12);
@keyframes animationStyle1 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}
</style>
